import React, {Component} from 'react';

import styles from './OrderBody.css';
import OrderAddressPros from "../pros/OrderAddressPros";

class OrderBody extends Component{

  constructor(props){
    super(props);
    this.state ={
      giftNum:1
    };
    this.handleChange = this.handleChange.bind(this);
    this.addNum = this.addNum.bind(this);
    this.cutNum = this.cutNum.bind(this);
  }

  handleChange(event) {
    this.setState({ [event.target.name] : event.target.value});
  }

  addNum(e,maxCount){
    e.preventDefault();
    if(isNaN(this.state["giftNum"])){
      this.state["giftNum"] =0;
    }
    if(this.state["giftNum"]>=maxCount){
      this.state["giftNum"] =maxCount;
    }else{
      this.state["giftNum"]=eval(this.state["giftNum"])+1;

    }
    var event ={target:{name:"giftNum",value:this.state["giftNum"]}};
    this.handleChange(event)
  }

  cutNum(){
    if(isNaN(this.state["giftNum"])){
      this.state["giftNum"] =1;
    }
    if(this.state["giftNum"]<=1){
      this.state["giftNum"] =1;
    }else{
      this.state["giftNum"] =this.state["giftNum"]-1;
    }
    var event ={target:{value:this.state["giftNum"]}};
    this.handleChange(event);
  }

  render() {
    return (
      <div className={styles.order_body_car}>
        <h1>选择兑换的礼品</h1>
        <div className={styles.tntcartable}>
          <table cellSpacing="0" cellPadding="0" className={styles.order_body_table}>
            <tbody>
            <tr className={styles.order_body_thead}>
              <td className={styles.tr_1}>&nbsp;</td>
              <td className={styles.tr_2} align="left">礼品名称</td>
              <td className={styles.tr_3} align="center">兑换积分</td>
              <td className={styles.tr_4} align="center">兑换数量</td>
              <td className={styles.tr_5} align="center">积分小计</td>
              <td className={styles.tr_6} align="center">操作</td>
            </tr>
            <tr>
              <td className={styles.imgtd}><span className={styles.tabimg}>
              <a href="/integral_view_4.htm" target="_blank">
                <img
                  src="/upload/integral_goods/c680900c-bfab-435e-8c5e-e8a5cce84549.jpg_small.jpg"
                  width="65" height="65"/></a></span>
              </td>
              <td className={styles.tabimg_name}>
                <div className={styles.table_div_text}>
                  <a href="/integral_view_4.htm"target="_blank">SSK 黑鹰II USB3.0 2.5英寸硬盘盒</a>
                </div>
              </td>
              <td align="center">
                <div className={styles.table_div_text_center}>
                  <span className={styles.tabimg_name}>500</span>
                </div>
              </td>
              <td >
                <div className={styles.table_div_text_center}>
                  <div className={styles.intg_addnum}>
                    <a href="javascript:void(0);"  className={styles.cut_num} onClick={this.cutNum}></a>
                    <input name="giftNum" type="text" className={styles.countertxt} id="count_4" value={this.state["giftNum"]} onChange={this.handleChange}/>
                    <a href="javascript:void(0);" className={styles.add_num} onClick={(e)=>this.addNum(e,12)}></a>
                  </div>
                </div>
              </td>
              <td align="center" id="ic_4">
                <div className={styles.table_div_text_center} >500</div>
              </td>
              <td align="center">
                <div className={styles.table_div_text_center} >
                  <a href="javascript:void(0);" className="integ_del">删除</a>
                </div>
              </td>
            </tr>
            </tbody>
          </table>
        </div>
        <div className={styles.order_body_cost}>
          <span>
            <i>您当前积分：6650 分</i>|
            <i>所需总积分：<strong id="total_points">500</strong>分</i>
          </span>
        </div>
        <div className={styles.order_body_submit}>
          <span>
            <i>
              <a href="/integral_exchange2.htm">填写并确认兑换</a>
            </i>
          </span>
        </div>
      </div>
    );
  }
}
export default OrderBody
